<template>
  <div>
    <div>
      <CommonTop></CommonTop>
      <CommonSearch></CommonSearch>
      <CommonNav></CommonNav>
    </div>
    <div style="padding: 0 10%">
      <div class="bg-white p-20" style="text-align: left; min-height: 80vh">
        <div class="m-b-20">
          <span>购物车</span>
        </div>
        <el-table
          :data="cartinfo"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#F5F7FA', color: '#666' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="name" label="图片" width="140">
            <!-- :preview-src-list="[require('@/assets/imgs/cardbooks/' + scope.row.image + '')]" -->
            <template #default="scope">
              <div>
                <el-image
                  style="width: 100px"
                  :src="scope.row.bookImg"
                  :z-index="9999"
                  hide-on-click-modal
                  preview-teleported
                  close-on-press-escape
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="shopinfo" label="书籍简介" width="180">
            <template #default="scope">
              <div>
                <div>
                  <span>书名：</span>
                  <span>{{ scope.row.bookName }}</span>
                </div>
                <div>
                  <span>作者：</span>
                  <span>{{ scope.row.bookAuthor }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" min-width="120">
            <template #default="scope">
              <div>
                <span>￥{{ scope.row.bookPrice }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="数量" min-width="180">
            <template #default="scope">
              <div>
                <el-input-number
                  v-model="scope.row.bookNum"
                  size="large"
                  :min="1"
                  @change="(data) => handleChange(data, scope.row)"
                  style="width: 100%"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sum" label="小计" min-width="120">
            <template #default="scope">
              <div>￥{{ parseFloat((parseInt(scope.row.bookPrice * 100) / 100) * scope.row.bookNum).toFixed(2) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="caozuo" label="操作" min-width="140">
            <template #default="scope">
              <div>
                <el-button type="danger" icon="Delete" @click="delEvent(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="w-100 flex-r flex-jc-r flex-ai-c m-t-20 end-sum">
          <div class="c-gray">
            <span>已选择</span>
            <span class="c-red">{{ number }}</span>
            <span>件商品</span>
          </div>
          <div>
            <span>合计：</span>
            <span class="c-red f-b f-16">￥{{ money }}</span>
          </div>
          <div>
            <el-button type="danger" size="large" style="width: 100px" :disabled="shopnum == 0">结算</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页查询 -->
    <div class="page">
      <div>
        <el-pagination
          :total="totle"
          :current-page="param.pageNum"
          :page-size="param.pageSize"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          layout=" total, sizes, prev, pager, next"
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </div>
    <div class="footer-box f-12 bg-primary">
      <Footer />
    </div>
  </div>
</template>

<script>
// import { mapState } from "vuex";
import CommonTop from "../components/top/CommonTop.vue";
import CommonSearch from "../components/top/CommonSearch.vue";
import CommonNav from "../components/top/CommonNav.vue";
import { getCartPage, delCart } from "../api/cart/Cart.js";

export default {
  name: "Shopping",
  components: {
    CommonTop,
    CommonNav,
    CommonSearch
  },
  data() {
    return {
      userinfo: null, // 用户信息
      param: {
        pageNum: 1,
        pageSize: 10
      },
      cartinfo: null, // 购物车信息
      totle: 0, //总数
      number: 0,
      money: "0.00",
      selectiondata: [],
      multipleSelection: [] // 批量删除
    };
  },
  created() {
    this.load(this.param);
  },
  methods: {
    load(param) {
      // 获取用户的购物车信息
      this.userinfo = JSON.parse(localStorage.getItem("userinfo"));
      getCartPage(param, this.userinfo.id)
        .then(res => {
          this.cartinfo = res.data.data.records;
          this.totle = res.data.data.total;
        })
        .catch(err => {});
    },
    // 删除购物车
    delEvent(value) {
      delCart(value.id).then(res => {
        this.load(this.param);
      });
    },
    handleChange(num, data) {
      if (this.selectiondata.length > 0) {
        this.selectiondata.map(n => {
          if (n.id == data.id) {
            n = data;
          }
          return n;
        });
        this.handleSelectionChange(this.selectiondata);
      }
    },

    // 切换到第几页
    handleCurrentChange(value) {
      this.param.pageNum = value;
      // 刷新数据
      this.load(this.param);
    },
    // 展示多少数据
    handleSizeChange(value) {
      this.param.pageSize = value;
      // 刷新数据
      this.load(this.param);
    },

    handleSelectionChange(data) {
      //   将勾选的对象存放到selectiondata数组中
      this.selectiondata = data;

      if (data.length > 0) {
        // reduce(): 归并类方法，计算数组中的每一项的总和。
        // 计算总数
        this.number = data.reduce((sum, item) => (sum += item.bookNum), 0);

        // toFixed()：保留两位小数
        // 计算总价格
        this.money = data
          .reduce((sum, item) => sum + item.bookNum * item.bookPrice, 0)
          .toFixed(2);
      } else {
        this.number = 0;
        this.money = "0.00";
      }
    }
  }
};
</script>

<style lang="scss">
body {
  background-color: #cacaca55;
}

.footer-box {
  height: 40px;
  line-height: 40px;
  color: #ffffff;
}

.end-sum {
  gap: 40px;
}
.page {
  width: 1220px;
  margin: 20px auto;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: center;
}
</style>
